import React, {Component} from 'react'
import { Input, DatePicker, Button, Select, Form } from 'antd'
import echarts from 'echarts'

const Search =　Input.Search
const Option = Select.Option
const FormItem = Form.Item


class ResultsSummary extends Component {
  constructor() {
    super()
    this.state = {
    }
    this.directorChange = this.directorChange.bind(this)
    this.needChange = this.needChange.bind(this)
    this.configOpt = this.configOpt.bind(this)
  }

  // 图表自定义配置
  configOpt() {
    const indexdata = {category:['满意','一般','较差'],total:[180,16,4]}
    return {
      color: ['#45b675','#f8a201','#f66a6b'],
      title: {
        show: true,
      },
      legend: {
        show: true,
        orient: 'vertical',
        right: 150,
        bottom: 'middle',
        itemGap: 20,
        selectedMode: 'multiple',
        itemHeight: 14,
        itemWidth: 14,
        tooltip: {
          show: true,
        },
        borderColor: '#e14141',
        data:[
            {value:indexdata.total[0], name:indexdata.category[0], icon: 'circle',},
            {value:indexdata.total[1], name:indexdata.category[1],icon: 'circle', textStyle: {
              color: 'red',
            }},
            {value:indexdata.total[2], name:indexdata.category[2],icon: 'circle',}
           ] 
      },
      tooltip: {
        show: true,
        showContent: true,
        trigger: 'item',
        alwaysShowContent: true,
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      animation: false,
      series: [
        {
          name:'课程态度',
          type:'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          startAngle: 340,
          label: {
              normal: {
                  show: false,
                  position: 'center'
              },
              emphasis: {
                  show: true,
                  textStyle: {
                      fontSize: '30',
                      fontWeight: 'bold'
                  }
              }
          },
          labelLine: {
              normal: {
                  show: false
              }
          },
          data:[
            {value:indexdata.total[0], name:indexdata.category[0],},
            {value:indexdata.total[1], name:indexdata.category[1]},
            {value:indexdata.total[2], name:indexdata.category[2]}
           ] 
        }
     ]
    }
  }
  componentDidMount() {
    const myChart = echarts.init(document.getElementById('chart'))
    console.log(myChart)
    myChart.setOption(this.configOpt())
  }
  directorChange(value) {
    console.log(`selected ${value}`);
  }

  needChange(value) {
    console.log(`selected ${value}`);
  }
  render() {
    const children = []
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>)
    }
    const { getFieldDecorator } = this.props.form
    return (
      <div className="rt-stu-new">
        <h3 className="rt-question-title">你觉得这个课程怎么样</h3>
        <div className="rt-question-content">
          <div id="chart" style={{width: "720px",height: '260px'}}></div>
        </div>
      </div>
     )
  }
}

export default Form.create()(ResultsSummary)